<template>
    <a-modal
        v-model:visible="visible"
        :title="title"
        :on-before-ok="handleBeforeOk"
        @cancel="handleCancel"
    >
        <template #title></template>
        <div>
            <a-form ref="formRef" :model="formData" :rules="formRules">
                <a-form-item field="productName" :label="$t('product.name')">
                    <a-input v-model="formData.productName"></a-input>
                </a-form-item>
                <a-form-item field="productNo" :label="$t('product.number')">
                    <a-input v-model="formData.productNo"></a-input>
                </a-form-item>
                <a-form-item
                    field="productCategory"
                    :label="$t('product.type')"
                >
                    <a-select v-model="formData.productCategory">
                        <a-option
                            v-for="option in ProductCategoryOptions"
                            :key="option.value"
                            :label="option.label"
                            :value="option.value"
                        ></a-option>
                    </a-select>
                </a-form-item>
                <a-form-item field="productType" :label="$t('device.type')">
                    <a-select v-model="formData.productType">
                        <a-option
                            v-for="option in ProductTypeOptions"
                            :key="option.value"
                            :label="option.label"
                            :value="option.value"
                        ></a-option>
                    </a-select>
                </a-form-item>
                <a-form-item field="description" :label="$t('description')">
                    <a-textarea
                        v-model="formData.description"
                        :placeholder="$t('qing-shu-ru-bei-zhu')"
                        allow-clear
                        auto-size
                    />
                </a-form-item>
                <a-form-item field="status" :label="$t('status')">
                    <a-switch
                        v-model="formData.status"
                        :checked-value="1"
                        :unchecked-value="0"
                    />
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>

<script lang="ts" setup>
    import { ref, reactive, PropType } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { createProductInfo, editProductInfo } from './service';
    import { ProductCategoryOptions, ProductTypeOptions } from './const';

    const { t } = useI18n();
    const props = defineProps({
        title: {
            type: String,
            default: undefined,
        },
        type: {
            type: String as PropType<'ADD' | 'EDIT'>,
            default: 'ADD',
        },
    });

    const emit = defineEmits(['submit']);

    const visible = ref(false);
    const formRef = ref();
    const formData = reactive({
        productName: '',
        productNo: '',
        productType: '',
        productCategory: '',
        description: '',
        status: 1,
    });
    const formRules = {
        productName: [
            {
                required: true,
                message: t('input.placeholder') + t('product.name'),
            },
        ],
        productNo: [
            {
                required: true,
                message: t('qing-shu-ru-chan-pin-bian-hao'),
            },
        ],
        productType: [
            {
                required: true,
                message: t('select.placeholder') + t('product.type'),
            },
        ],
        productCategory: [
            {
                required: true,
                message: t('select.placeholder') + t('device.type'),
            },
        ],
    };

    function open(data: any) {
        Object.assign(formData, data);
        visible.value = true;
    }

    const handleBeforeOk = async () => {
        const res = await formRef.value.validate();
        if (!res) {
            if (props.type === 'ADD') {
                await createProductInfo(formData);
            } else {
                await editProductInfo(formData);
            }
            emit('submit');
            formRef.value.resetFields();
            return true;
        }
        return false;
    };

    function handleCancel() {
        formRef.value.resetFields();
        visible.value = false;
    }

    defineExpose({
        open,
    });
</script>
